<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/element-ui-index.css">
    <!-- 引入组件库 -->

    <style type="text/css">
        .active{
            background-color: cornflowerblue;
        }
    </style>

</head>
<body>
<div id="app">
    <all-body></all-body>
    <!-- <div style="background-color: burlywood; height: 500px;"></div> -->

</div>



</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/element-ui-index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    let ComA = {
        template: `
                <el-col :span="18" style="background-color: burlywood;height: 400px;">
                    我是用户管理
                </el-col>
            `,
    };

    let ComponentA = {
        props: ['book'],
        template: `
    				    <button
    				      type="button"
    				      v-on:click="$emit('reduce-num')"
    					  :disabled="book.num<1">
    					  -</button>
    				  `,
    };

    let ComponentB = {
        template: `
    				    <button
    				      type="button"
    				      v-on:click="$emit('add-num')">
    					  +</button>
    				  `
    };

    let ButtonNum = {
        props: ['book'],
        template: `
    				<div>
    				    <button-reduce v-bind:key="book.id+book.bookName" v-bind:book="book" v-on:reduce-num="reduce(book)"></button-reduce>
    					{{book.num}}
    					<button-add v-bind:key="book.id" v-bind:book="book" v-on:add-num="add(book)"></button-add>
    				</div>
    				  `,
        components: {
            'button-reduce': ComponentA,
            'button-add': ComponentB,
        },
        methods: {
            add: function (item) {
                console.log(item);
                item.num++;
            },
            reduce: function (item) {
                console.log(item);
                item.num--;
            },
        },
    }

    let ComponentC = {
        template: `
    				    <button type="button"
    					v-on:click="$emit('remove-num')">
    					移除</button>
    				  `
    };

    let ComBook = {
        props: ['book'],
        template: `
                <el-col :span="18" style="background-color: burlywood;height: 400px;">
					<h4>{{book.id}}</h4>
					<h4>{{book.bookName}}</h4>
					<h4>{{book.tdate}}</h4>
					<h4>{{book.price}}</h4>
                </el-col>
            `,
    };

    let ComB = {
        // props: ['curCom'],
        data() {
            return {
                books: [
                    { isActived: false, isChecked: false, id: 1, tdate: '2010-10', price: 60, num: 1, bookName: '<<PHP从入门到放弃>>' },
                    { isActived: false, isChecked: false, id: 2, tdate: '2012-10', price: 90, num: 1, bookName: '<<Python从入门到放弃>>' },
                    { isActived: false, isChecked: false, id: 3, tdate: '2013-10', price: 80.01, num: 1, bookName: '<<什么都是从入门到放弃>>' },
                    { isActived: false, isChecked: false, id: 4, tdate: '2011-10', price: 70.00, num: 1, bookName: '<<Java从入门到放弃>>' },
                ],
                activeId: '',
                curCom: 'com-b'
            }
        },
        template: `
                <div>
		           <table>
		                <thead>
		                    <tr>
								<th><button type="button" v-on:click="moreRemove(books)">批量</button></th>
		                        <th>序号</th>
		                        <th>书籍名称</th>
		                        <th>出版日期</th>
		                        <th>价格</th>
		                        <th>购买数量</th>
								<th>操作</th>
		                    </tr>
		                </thead>
		                <tbody class="collection">
		                    <tr v-for ="(book,index) in books" :key="book.id" :class="{'active': book.isActived}">
							  <td><input type="checkbox" :checked="book.isChecked" @click="selected(book)" /></td>
		                      <td>{{book.id}}</td>
		                      <td><a v-bind:book="book" @click="bookView(book)">{{book.bookName}}></a></td>
		                      <td>{{book.tdate}}</td>
		                      <td>{{formatPrice(book.price)}}</td>
							  <td><button-num :book='book'></button-num></td>
		                      <td><button-remove v-on:remove-num="remove(index)"></button-remove></td>
		                    </tr>
		                </tbody>
		            </table>
					<h4></h4>
					<h3>总价格：{{formatPrice(total)}}</h3>
		   </div>
            `,
        components: {
            'button-num': ButtonNum,
            'button-remove': ComponentC,
            'com-book': ComBook,
        },
        computed: {
            total: function () {
                return this.books.reduce((returnVal, nextItem) => returnVal + nextItem.price * nextItem.num, 0);
            },
            formatPrice: function () {
                return price => '￥' + price.toFixed(2);
            }
        },
        methods: {
            remove: function (index) {
                console.log(index);
                console.log("num==" + this.books.length);
                this.books.splice(index, 1);
                if (this.books.length === 0) {
                    let h4 = document.getElementsByTagName("h4")[0];
                    h4.innerText = '无商品';
                    console.log("msg==" + this.books.msg)
                }
            },
            selected: function (item) {
                console.log(item);
                item.isActived = !item.isActived;
            },
            moreRemove: function (books) {
                console.log(books);
                for (var i = 0; i < books.length; i++) {
                    if (books[i].isActived == true) {
                        console.log(books[i])
                        this.books.splice(books[i].id - 1, 1);
                    }
                }
            },
            bookView: function (item) {
                this.$parent.bookView(item);
            }

        },
    };

    let HeadBody = {
        template: `
                  <div>
                    <h3 style="text-align: center;">我是标题</h3>
                  </div>
            `
    };

    let MainBody = {
        data() {
            return {
                curCom: 'com-a',
            }
        },
        template: `

                  <el-row>
                      <el-col :span="6" style="background-color: cadetblue;height: 400px;">
                        <ul>
							<li><button @click="showA">用户管理</button></li>
							<li><button @click="showB">购物车</button></li>
						</ul>
                      </el-col>
                      <el-col :span="18" style="background-color: burlywood;height: 400px;">
                        <component :is="curCom" ></component>
                      </el-col>
                    </el-row>

            `,
        components: {
            'com-a': ComA,
            'com-b': ComB,
        },
        methods: {
            showA: function () {
                this.curCom = 'com-a';
            },
            showB: function () {
                this.curCom = 'com-b';
            },
            bookView: function (item) {
                console.log("father="+item);
                this.curCom = 'com-book';
            }
        },

    };

    let FooterBody = {
        template: `
                <footer>
                    <h3 style="text-align: center;">我是底部</h3>
                </footer>
            `
    };

    let AllBody = {
        template: `
    			<div>
    				<head-body></head-body>
                    <main-body></main-body>
                    <footer-body></footer-body>
    			</div>
    		    `,
        components: {
            'head-body': HeadBody,
            'main-body': MainBody,
            'footer-body': FooterBody
        },
    }


    let app = new Vue({
        el: '#app',

        components: {
            'all-body': AllBody
        },

    });





</script>
</html>
